@use 'scss/defaults/colors' as dc;
@use 'scss/defaults/variables' as dv;

.omv-about-page {
  animation-name: decrunch;
  animation-duration: 0.25s;
  animation-iteration-count: 5;
  animation-timing-function: steps(1);

  .mat-card {
    margin: dv.$omv-margin;
    padding: 0;

    .titlebar {
      height: 20px;
      background-color: dc.$omv-color-cobalt-blue;
      color: dc.$omv-color-white;

      .close {
        background-image: url('^./assets/images/wb-tb-close.png');
        width: 30px;
        height: inherit;
      }

      .title {
        background-color: dc.$omv-color-white;
        color: dc.$omv-color-cobalt-blue;
        font-family: sans-serif;
        padding-left: 4px;
        padding-right: 4px;
      }

      .mid {
        background-image: url('^./assets/images/wb-tb-mid.png');
      }

      .mid-end {
        background-color: dc.$omv-color-white;
        width: 3px;
      }

      .position {
        background-image: url('^./assets/images/wb-tb-position.png');
        width: 53px;
        height: inherit;
      }
    }
  }

  .mat-card-content {
    border-left: 2px dc.$omv-color-white solid;
    border-right: 2px dc.$omv-color-white solid;
    border-bottom: 2px dc.$omv-color-white solid;
    padding: dv.$omv-padding;
    background-color: dc.$omv-color-cobalt-blue;
    color: dc.$omv-color-white;

    .logo {
      .ascii-art {
        line-height: normal;
        margin: 0;
        overflow: hidden;
      }

      .side-scroller {
        overflow: hidden;
        white-space: nowrap;
        scroll-behavior: smooth;

        .text {
          padding-left: 100%;
          animation: scroll-left 30s infinite linear forwards;
        }
      }
    }

    .cursor {
      color: dc.$omv-color-dark-orange;
    }
  }
}

@keyframes scroll-left {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes decrunch {
  20% {
    background: #68d0a8
      linear-gradient(
        to bottom,
        #68d0a8 10%,
        #a838a0 10%,
        #a838a0 15%,
        #e53e91 15%,
        #e53e91 20%,
        #e5683e 20%,
        #e5683e 25%,
        #50b818 25%,
        #50b818 30%,
        #181090 30%,
        #181090 35%,
        #f0e858 35%,
        #f0e858 40%,
        #a04800 40%,
        #a04800 45%,
        #ff3b30 45%,
        #ff3b30 50%,
        #c87870 50%,
        #c87870 55%,
        #484848 55%,
        #484848 60%,
        #808080 60%,
        #808080 65%,
        #98ff98 65%,
        #98ff98 70%,
        #5090d0 70%,
        #5090d0 75%,
        #b8b8b8 75%,
        #b8b8b8 80%,
        #000000 80%,
        #000000 85%,
        #a838a0 85%,
        #a838a0 90%,
        #68d0a8 90%,
        #68d0a8 95%,
        #484848 95%
      );
  }

  40% {
    background: #b8b8b8
      linear-gradient(
        to bottom,
        #b8b8b8 5%,
        #c87870 5%,
        #c87870 10%,
        #bb3ee5 10%,
        #bb3ee5 20%,
        #ff3b30 20%,
        #ff3b30 30%,
        #5090d0 30%,
        #5090d0 35%,
        #98ff98 35%,
        #98ff98 40%,
        #68e53e 40%,
        #68e53e 45%,
        #808080 45%,
        #808080 50%,
        #484848 50%,
        #484848 55%,
        #c87870 55%,
        #c87870 60%,
        #472b1b 60%,
        #472b1b 65%,
        #a04800 65%,
        #a04800 70%,
        #f0e858 70%,
        #f0e858 75%,
        #b8b8b8 75%,
        #b8b8b8 80%,
        #000000 80%,
        #000000 85%,
        #3ebbe5 85%,
        #3ebbe5 90%,
        #181090 90%,
        #181090 95%,
        #98ff98 95%
      );
  }

  60% {
    background: #e5e53e
      linear-gradient(
        to bottom,
        #e5e53e 5%,
        #ff3b30 5%,
        #ff3b30 10%,
        #484848 10%,
        #484848 15%,
        #808080 15%,
        #808080 20%,
        #98ff98 20%,
        #98ff98 25%,
        #3ee591 25%,
        #3ee591 30%,
        #3ebbe5 30%,
        #3ebbe5 35%,
        #5090d0 35%,
        #5090d0 40%,
        #3e3ee5 40%,
        #3e3ee5 45%,
        #b8b8b8 45%,
        #b8b8b8 50%,
        #a838a0 55%,
        #a838a0 65%,
        #50b818 65%,
        #50b818 70%,
        #181090 70%,
        #181090 75%,
        #f0e858 75%,
        #f0e858 80%,
        #a04800 80%,
        #a04800 85%,
        #472b1b 85%,
        #472b1b 90%,
        #882000 90%,
        #882000 95%,
        #b8b8b8 95%
      );
  }

  80% {
    background: #bb3ee5
      linear-gradient(
        to bottom,
        #bb3ee5 5%,
        #ffffff 5%,
        #ffffff 10%,
        #b8b8b8 10%,
        #b8b8b8 15%,
        #5090d0 15%,
        #5090d0 20%,
        #98ff98 20%,
        #98ff98 25%,
        #808080 25%,
        #808080 30%,
        #484848 30%,
        #484848 35%,
        #ff3b30 35%,
        #ff3b30 40%,
        #472b1b 40%,
        #472b1b 45%,
        #a04800 45%,
        #a04800 50%,
        #f0e858 50%,
        #f0e858 55%,
        #181090 55%,
        #181090 60%,
        #50b818 60%,
        #50b818 65%,
        #c87870 65%,
        #c87870 70%,
        #a838a0 70%,
        #a838a0 75%,
        #68d0a8 75%,
        #68d0a8 80%,
        #882000 80%,
        #882000 85%,
        #3e3ee5 85%,
        #3e3ee5 95%,
        #b8b8b8 95%
      );
  }

  100% {
    background: #3e3ee5
      linear-gradient(
        to bottom,
        #3e3ee5 5%,
        #68d0a8 5%,
        #68d0a8 10%,
        #3ee591 10%,
        #3ee591 15%,
        #50b818 15%,
        #50b818 20%,
        #181090 20%,
        #181090 25%,
        #f0e858 25%,
        #f0e858 30%,
        #a04800 30%,
        #a04800 35%,
        #472b1b 35%,
        #472b1b 40%,
        #c87870 40%,
        #c87870 45%,
        #484848 45%,
        #484848 50%,
        #808080 50%,
        #808080 55%,
        #98ff98 55%,
        #98ff98 60%,
        #e5e53e 60%,
        #e5e53e 65%,
        #5090d0 65%,
        #5090d0 70%,
        #b8b8b8 70%,
        #b8b8b8 75%,
        #000000 75%,
        #000000 80%,
        #bb3ee5 80%,
        #bb3ee5 85%,
        #e5683e 85%,
        #e5683e 90%,
        #3e3ee5 90%,
        #3e3ee5 95%,
        #ffffff 95%
      );
  }
}
